<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../vue_lib/vue.js"></script>
    <title>组建基础</title>
</head>
<body>
<div id="app">
    <button-counter title="title1：" @clicknow="clicknow">
        <h1>我很好！</h1>
    </button-counter>
    <br>
    <button-counter title="title2："></button-counter>

</div>
<script>
    Vue.component(
        'button-counter',
        {   props:['title'],
            data:function () {
               return { counter:0 }
            },
            template:'<div><h1>你好！</h1><button v-on:click="clickfun">{{ title }}点击我 {{ counter }}</button><slot></slot></div>',
            methods:{
               clickfun:function () {
                  this.counter ++;
                  this.$emit('clicknow',this.counter)
               }
            }
        }
    )
</script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            clicknow:function (e) {
                console.log(e)

            }
        }
    })
</script>
</body>
</html>